DropDownBox Properties

Description

DropDownBoxes are appropriate when you want to select a value from a large list of alternatives.

The most important properties for a dropdownbox control is the definition of its choices and its height. A height of 1 produces a combo box. A height greater than 1 produces a list box. If you set the height to be more than 1 line, you can also set the multi-select allowed field to "Multiple". This allows the user to select more than one value to insert into the field. (Commas will separate the resulting selections) Note :DropDownBoxes do not allow the user to enter new values.

Choices

Defines the choices the appear in the control. Click to define the true and false Choices set by the check box. Refer to Defining Choices for Check Boxes, Radio Buttons, and Drop Down Lists for details.

  • Dropdown Controls - Group Headings

    You can insert group headings in the data displayed in a Dropdown control. The list is entered into the choices for the Dropdown control as follows:

    [[[General Motors]]]
    Camaro
    Cadilac
    GMC
    [[[Ford]]]
    Mustang
    Lincoln
    Focus
    [[[BMW]]]
    3 Series
    5 Series
    7 Series

Displaying Field1 While Storing Field2:

The following grid component displays a valuable capability of choice lists used by drop down lists and radio buttons. The sample grid below is based on the AlphaSports Invoice_Items table, which uses the Product_ID field to link to the Product table. The second column of the grid displays the Description field from the Product table, while it stores the Product_ID field from the Product table.

To implement this feature:

  1. Create an updatable grid based on the AlphaSports Invoice_Items table.

  2. Display the Grid > Fields menu of the Grid Component Builder.

  3. Select the "Product_ID" field in the Available Fields list.

  4. Change the Display Settings > Control type to "Dropdownbox".

  5. Click the in the DropDownBox Properties > Choices field to display the Define Choices dialog.

  6. Select "Dynamic" in the Define Choices > List Type field.

  7. Select "product" in the Data Source > Table name field.

  8. Select "Description" in the Data Source > Display value field / expression field.

  9. Select "Product_ID" in the Data Source > Stored value field / expression field.

images/WPT_Display_One_Field_Store_Another.gif

When you allow the user to select multiple values, the control returns an array. To convert an array to a character value, you need to use an expression like the following.

TargetVariable = crlf_to_comma(ControlName.dump()

Displaying Multiple Fields in a Drop Down List:

Displaying multiple fields in a drop down list is a challenge because browsers automatically compress multiple white-space characters down to a single character. Thus, it is difficult to format columns. This example uses the underscore character "_" to guarantee that fields and columns are aligned. This example is based on the Invoice_Items table of the AlphaSports sample database.

Creating the Drop Down List

  1. Create a grid based on the Invoice_Items table of the AlphaSports sample database.

  2. Display the Grid > Fields menu.

  3. Move the "Invoice_Number" field to the Selected Fields list.

  4. Select the "Invoice_Number" field in the Selected Fields list.

    • Set its Display Settings > Control type property to "DropDownBox".

    • Set its DropDownBox Properties > Height property to 10.

    • Set its DropDownBox Properties > In-line style property to "font-family:Courier New; ".

    • Set its DropDownBox Properties > Not in list rule property to "Do Nothing".

    • Set its Column Properties > Column heading property to "Select Invoice Item".

    • Set its Column Properties > Heading in-line style property to "font-family: Courier New; text-align: left;".

  5. Click in the DropDownBox Properties > Choices property to display the Define Choices dialog box.

    • Set the Define Choices > List Type property to "Dynamic".

    • Set the Data Source > Data source type property to "DBF-Table".

    • Set the Data Source > Table name property to "invoice_items".

    • Click in the Data Source > Display value field/expression property to display the Expression Builder.

    • Enter the following expression and click OK.

      Invoice_Number+" "+alltrim(Product_Id) + " " + padl(str(Price,250,2,"$("),10,"_") + " " + padl(alltrim(str(quantity,10) ),10,"_") + " " + padl(str(Extension,250,2,"$("),10,"_")
  6. Display the Grid > Properties menu.

  7. Set the Layout Options > Rows of data property to 1.

  8. Set the Customization > Total records message position property to ""No Message.

  9. Click in the Freeform Edit Regions > Above grid property to display the HTML Editor.

  10. Switch to the Source tab and enter the following text into the body of the page.

    [& ID& & & & PID&
    & & & & & Price& & & Quantity 
    & & & Extension
  11. Click Save in the HTML Editor and Save in the Grid Builder.

  12. Click Browser to preview your work. It should look something like the following.

    images/WPT_Drop_down_list_w_many_fields.gif

Properties

  • Choices

    Specify the choices that appear in the DropDownBox.

  • Maximum choices

    Specify the maximum number of choices to show. Set to 0 to show all choices.

  • Height

    Set the height of the label in lines. The default is 1, which produces a combo box. Values larger than 1 produce a list box.

    with tmpl.field_info[N]        
    .DropdownBox.Size as N
  • Multi-select allowed

    Defines whether the user can select more than one value from the list. The options are: "Single" and "Multiple"

    with tmpl.field_info[N]          
    .DropdownBox.selectStyle as C
  • In-line style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    with tmpl.field_info[N]          
    .DropdownBox.InLineStyle as C
  • Not in list rule

    Specifies the value to display if the list contains a value not coded in the page. The options are: "Add to list" - display the value "Do Nothing" - show the first value in the list

    Add to list

    Display the value.

    Do Nothing

    Show the first value in the list.

  • with tmpl.field_info[N]            
    .DropdownBox.NotInListRule as C
  • In-line style for errors

    Specifies style attributes that are used when a validation error occurs. Click to define the In-line style.

    with tmpl.field_info[N]            
    .DropdownBox.ErrorInLineStyle as C
  • Style control if error

    Specifies whether to apply a second style to the field if a validation error occurs.

    with tmpl.field_info[N]            
    .DropdownBox.StyleFieldIfError as L
    This property is obsolete and no longer available in Alpha Anywhere.